<script>
/**
 * 与FormItem差别是会渲染为td，可以完全控制布局
 * @displayName SdFormItemTd 表单项
 */
export default {
  name: 'SdFormItemTd',
  functional: true,

  /**
   * 字段可编辑时的内容
   * @slot default
   */
  /**
   * 字段只读时的内容
   * @slot read
   */
  /**
   * 字段可编辑+只读时都使用的内容
   * @slot read-and-edit
   * @binding {boolean} editable 是否为可编辑状态
   */
  /**
   * <p>转发给自动适配组件的插槽</p>
   * <p>比如 input-suffix 会作为 suffix 插槽，传递给内部的组件</p>
   * <p>8.0.5 新增</p>
   * @slot input-*
   */
  render(createElement, context) {
    const readAndEditSlot = context.scopedSlots['read-and-edit']
    const second = createElement(
      'td',
      {
        class: context.data.class,
        style: context.data.style,
        attrs: context.data.attrs,
      },
      [createElement('el-form-item', context.data, context.children)]
    )

    return [second]
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-form-item {
  width: 99%;
  margin: 0px;
  .el-form-item__label,
  .el-form-item__content {
    vertical-align: middle;
    & > div,
    &:after,
    &:before {
      display: inline;
    }
    .el-input__inner {
      width: auto;
      padding-right: 15px;
    }
  }
}
</style>
